<template>
  <a-empty class="sl-empty !mx-0">
    <template v-if="description || defaultLocalKey" #description>
      <slot name="description">
        <p class="sl-empty-text text-color-main">
          {{ description || t(defaultLocalKey) }}
        </p>
      </slot>
    </template>
  </a-empty>
</template>
<script lang="ts" setup>
import { useI18n } from "/@/locales/useI18n";
import Icon from "/@/components/Icon.vue";

const { t } = useI18n();
withDefaults(
  defineProps<{
    description?: string;
    defaultLocalKey?: string;
    icon?: string;
  }>(),
  {
    defaultLocalKey: "common.nodata",
  }
);
</script>

<style lang="less">
.sl-empty-icon {
  font-size: 100px;
}
.sl-empty-text {
  font-size: 16px;
}
.ant-select-item-empty,
.ant-select-dropdown-empty {
  .sl-empty-icon {
    font-size: 50px;
  }
  .sl-empty-text {
    font-size: 12px;
    color: @color-secondary;
  }
}
</style>
